<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
});

const delFun = () => {
  console.log(';;;;;;;;;;', props.data);
};
</script>

<template>
  <div class="route-item-wrap">
    <div class="top_btn">
      <t-button class="common-button del-box" theme="default" @click="delFun">
        <svg-icon class="item-icon" name="options-del02"></svg-icon>
        <span style="font-size: 12px; color: #9e9e9e">删除</span>
      </t-button>
    </div>
    <div class="info-wrap">
      <div class="item">
        <div class="label">连接类型</div>
        <div class="value">{{ data.type }}</div>
      </div>
      <div class="item">
        <div class="label">目标地址</div>
        <div class="value">{{ data.targetAdr }}</div>
      </div>
      <div class="item">
        <div class="label">通道类型</div>
        <div class="value">{{ data.passageway_type }}</div>
      </div>
      <div class="item">
        <div class="label">通道地址</div>
        <div class="value">{{ data.passageway_adr }}</div>
      </div>
      <div class="item">
        <div class="label">生效时间</div>
        <div class="value">{{ data.take_effect_time }}</div>
      </div>
      <div class="item">
        <div class="label">备注</div>
        <div class="value omit">{{ data.remarks }}</div>
      </div>
      <div class="item">
        <div class="label">报错信息</div>
        <div class="value omit">
          <t-popup :content="data.error_info" placement="top" :show-arrow="true" :destroy-on-close="true">
            <t-link class="omit" theme="primary" style="font-size: 12px" :underline="true">{{
              data.error_info
            }}</t-link>
          </t-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.route-item-wrap {
  width: 100%;
  height: 100%;
  padding: 6px 20px 20px 6px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.1);
  .top_btn {
    display: flex;
    justify-content: flex-end;
    .del-box {
      height: 20px;
      padding: 0 5px;
      :deep(.t-button__text) {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 2px;
        }
      }
    }
  }
  .info-wrap {
    .item {
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-bottom: 14px;
      .label {
        width: 80px;
        text-align: end;
        margin-right: 20px;
      }
      .value {
        width: 100%;
      }
    }
  }
}
</style>
